<template>
  <div class="custom_from__container">
    <custom-form ref="form" formRef="freeForm" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
    <el-row class="flex">
      <el-button class="btn_group" @click="dialogVisible('add')">默认按钮</el-button>
      <el-button class="btn_group_active">点击之后</el-button>
      <el-button class="btn_ghost__danger">应急指挥</el-button>
      <el-button class="btn_ghost__primary">确认处理</el-button>
      <el-button class="btn_warning">确认处理</el-button>
      <div class="tag_group">
        <span class="tag_primary">编辑</span>
        <span class="tag_warning">删除</span>
        <span class="tag_danger">操作</span>
      </div>
    </el-row>
    <div id="point_container">
      <!--  CustomForm  -->
      <el-dialog :visible.sync="dialogIsShow">
        <template v-if="visibleType === 'add'">
          <custom-form ref="form" formRef="freeForm" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
        </template>
        <template v-else-if="visibleType === 'delect'">
          <span>这是一段{{ visibleType }}信息</span>
        </template>
        <template v-else-if="visibleType === 'update'"> </template>
        <template v-else>
          <span>这是一段{{ visibleType }}信息</span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import CustomForm from '@/components/CustomForm'
import BaseSelect from '@/components/BaseForm/BaseSelect.vue'
import BaseCheckboxGroup from '@/components/BaseForm/BaseCheckboxGroup.vue'
import BaseClick from '@/components/BaseForm/BaseClick.vue'
import BaseRadioGroup from '@/components/BaseForm/BaseRadioGroup.vue'

export default {
  components: {
    CustomForm,
    BaseSelect,
    BaseCheckboxGroup,
    BaseClick,
    BaseRadioGroup,
  },
  data () {
    return {
      // 表单数据
      formModel: {
        account: '',
        affiliatedUnit: '',
        sysRoles: '',
        accountName: '',
        password: '',
        phone: '',
        notification: [],
        userType: '',
      },
      // el-form-item 配置项
      formItemConfig: [
        {
          label: '登录账号',
          prop: 'account',
          component: BaseSelect,
          span: 12,
          clearable: true,
          width: '100%',
          options: [
            { label: '账号1', value: 'account1' },
            { label: '账号2', value: 'account2' },
          ],
          placeholder: '请输入用户名',
        },
        {
          label: '所属单位',
          prop: 'affiliatedUnit',
          component: BaseSelect,
          span: 12,
          clearable: true,
          width: '100%',
          options: [
            { label: '单位1', value: 'unit1' },
            { label: '单位2', value: 'unit2' },
          ],
        },
        {
          label: '登录角色',
          prop: 'sysRoles',
          component: BaseSelect,
          span: 12,
          width: '100%',
          options: [
            { label: '角色1', value: 'roles1' },
            { label: '角色2', value: 'roles2' },
          ],
        },
        {
          label: '用户姓名',
          prop: 'accountName',
          span: 12,
        },
        {
          label: '用户密码',
          prop: 'password',
          span: 12,
          showPassword: true,
          width: '100%',
        },
        {
          label: '通知方式',
          prop: 'notification',
          component: BaseCheckboxGroup,
          span: 24,
          width: '100%',
          options: [
            {
              label: 'app',
              value: 'app',
            },
            {
              label: '短信',
              value: 'message',
            },
            {
              label: '语音',
              value: 'voice',
            },
          ],
        },
        {
          label: '用户状态',
          prop: 'userType',
          component: BaseRadioGroup,
          span: 24,
          width: '100%',
          options: [
            {
              label: '正常',
              value: 1,
            },
            {
              label: '禁用',
              value: 2,
            },
            {
              label: '临时',
              value: 3,
            },
          ],
        },
        {
          label: '活动时间',
          prop: 'dateTime',
          component: 'el-date-picker',
          span: 12,
          width: '100%',
        },
        {
          label: '活动时间',
          prop: 'dateTime',
          component: 'el-date-picker',
          span: 24,
          width: '100%',
        },
        {
          title: '标题-级联',
        },
      ],
      // el-form-item 验证规则
      formRules: {
        accountName: {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
      },
      dialogIsShow: false,
      visibleType: '',
    }
  },
  methods: {
    submitForm () {
      this.$refs.form.validate((valid, formData) => {
        console.log(valid, formData)
      })
    },
    dialogVisible (type) {
      this.dialogIsShow = true
      this.visibleType = type
      switch (type) {
        case 'add': {
          break
        }
      }
    },
  },
}
</script>

<style scoped></style>
